<template>
	<a-card class="general-card" title="登录日志">
		<a-row>
			<a-col :flex="1">
				<a-form :model="searchParam" :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }" label-align="right">
					<a-row :gutter="20">
						<a-col :span="10">
							<a-form-item label="渠道名称">
								<a-input v-model="searchParam.clientId" placeholder="请输入渠道名称" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="真实姓名">
								<a-input v-model="searchParam.realName" placeholder="请输入真实姓名" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="用户名">
								<a-input v-model="searchParam.userName" placeholder="请输入用户名" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="登陆时间">
								<a-range-picker @change="onDateChange" style="width: 800px"></a-range-picker>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-col>
			<a-divider style="height: 84px" direction="vertical" />
			<a-col :flex="'86px'" style="text-align: right">
				<a-space direction="vertical" :size="18">
					<a-button type="primary" @click="search">
						<template #icon> <icon-search /> </template>搜索
					</a-button>
					<a-button @click="reset">
						<template #icon> <icon-refresh /> </template>重置
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-divider style="margin-top: 10px" />
		<a-row style="margin-bottom: 16px">
			<a-col :span="12">
				<a-space>
					<a-button>
						<template #icon>
							<icon-download />
						</template>
						下载
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-table
			row-key="id"
			:pagination="pageable"
			page-position="br"
			@page-change="handleCurrentChange"
			@page-size-change="handleSizeChange"
			:loading="loadingValue"
			:columns="columns"
			:data="records"
			:bordered="false"
			:column-resizable="true"
			size="medium"
		>
			<template #index="{ rowIndex }">
				{{ rowIndex + 1 + (pageable.current - 1) * pageable.pageSize }}
			</template>
			<template #avatar>
				<a-avatar :style="{ backgroundColor: '#14a9f8' }">Arco</a-avatar>
			</template>
			<template #isEnabled="{ record }">
				<div v-if="record.isEnabled === 1"><span class="circle pass"></span> 正常</div>
				<div v-else><span class="circle danger"></span> 禁用</div>
			</template>
		</a-table>
	</a-card>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import useLoading from '@/hooks/loading';
import { useTable } from '@/hooks/useTable';
import { getSysLogLogList } from '@/api/user';
import { User } from '@/api/types';
import { a } from 'vite-plugin-mock/dist/types-5af01a9a';
import { TableColumnData } from "@arco-design/web-vue";

const { records, pageable, searchParam, loadingValue, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
	useTable(getSysLogLogList);
const columns: TableColumnData[] = [
	{
		title: '序号',
		dataIndex: 'id',
		width: 100,
		slotName: 'index',
	},
	{
		title: '渠道名称',
		dataIndex: 'clientId',
	},
	{
		title: '用户id	',
		dataIndex: 'userId',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '用户名',
		dataIndex: 'userName',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '真实姓名',
		dataIndex: 'realName',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '登录IP',
		dataIndex: 'loginIp',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '登录结果',
		dataIndex: 'loginDesc',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '登陆时间',
		dataIndex: 'createTime',
		ellipsis: true,
		tooltip: true,
	},
];

const onDateChange = (dateString: string[]) => {
	searchParam.value.startDate = dateString[0];
	searchParam.value.endDate = dateString[1];
};

onMounted(() => {
	getTableList();
});
</script>

<script lang="ts">
export default {
	name: 'SearchTable',
};
</script>

<style scoped lang="less">
.container {
	padding: 0 20px 20px 20px;
}
:deep(.arco-table-th) {
	&:last-child {
		.arco-table-th-item-title {
			margin-left: 16px;
		}
	}
}
.action-icon {
	margin-left: 12px;
	cursor: pointer;
}
.active {
	color: #0960bd;
	background-color: #e3f4fc;
}
.setting {
	display: flex;
	align-items: center;
	width: 200px;
	.title {
		margin-left: 12px;
		cursor: pointer;
	}
}
:deep(.arco-card-body) {
	.arco-pagination {
		margin-top: 20px;
	}
}
//:deep(.arco-table) {
//	height: 430px;
//}
</style>
